<template>
    <div id="vue-loading" v-show="loadings.length || loadingStatus">
        <div class="filter" v-show="full"></div>
        <div class="loader-wrap">
            <div class="loader"></div>
            <div class="hint">{{tipText}}</div>
        </div>
    </div>
</template>

<script>
export default {
    name:'Loading',
    props:{
        loadingStatus: Boolean,
        loadingText: String
    },
    data(){
        return {
            loadings: [],         
            text: '正在加载...', 
            full: true,           //是否展示蒙层
        }
    },
    computed:{
        tipText(){
            return this.loadingText || this.text
        }
    },
}
</script>
<style lang="stylus" scoped>
    #vue-loading 
        width 100%
        height 100%
        position absolute
        left 0
        top 0
        z-index 999
        .filter
            width 100%
            height 100%
            background rgba(255,255,255,0.2);
        .loader-wrap 
            position absolute 
            left 50%
            top 50%
            transform translate(-50%,-50%)
            .hint
                margin-top 10px
                font-size 14px
                color #666
                text-shadow 1px 1px 3px white     
            .loader
                width 2.5em
                height 2.5em
                transform rotate(165deg)
                position relative
                &:before 
                    animation before 2s infinite
                &:after 
                    animation after 2s infinite
                &:before, 
                &:after 
                    content ''
                    position absolute
                    top 50%
                    left 50%
                    display block
                    width 0.5em
                    height 0.5em
                    border-radius 0.25em
                    transform translate(-50%, -50%)
</style>

<style>

@keyframes before {
 0% {
 width: 0.5em;
 box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
 }
 35% {
 width: 2.5em;
 box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
 }
 70% {
 width: 0.5em;
 box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
 }
 100% {
 box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
 }
}
@keyframes after {
 0% {
 height: 0.5em;
 box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
 }
 35% {
 height: 2.5em;
 box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
 }
 70% {
 height: 0.5em;
 box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
 }
 100% {
 box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
 }
}
/**
 * Attempt to center the whole thing!
 */
html,
body {
 height: 100%;
}
.loader {
 position: absolute;
 top: calc(50% - 1.25em);
 left: calc(50% - 1.25em);
}
</style>

